import React, { Component } from 'react';
import './HCModifyPhone.css'
import { Flex, InputItem, Button } from 'antd-mobile';

class HCModifyPhone extends Component {
    fanhui = () => {
        this.props.history.push('/Home/HCinformation')
    }
    render() {
        return (
            <div className='HCModifyPhone_box'>
                <Flex style={{ backgroundColor: '#FFD656' }}>
                    <Flex.Item>
                        <div className='HCModifyPhone_title_icon'>
                            <i className="iconfont icon-jiantouarrowhead7" onClick={this.fanhui}></i>
                        </div>
                    </Flex.Item>
                    <Flex.Item>
                        <div className="HCModifyPhone_sub-title">修改手机号</div>
                    </Flex.Item>
                    <Flex.Item></Flex.Item>
                </Flex>
                <div>
                    <div className='HCModifyPhone_content_box'>
                        <InputItem
                            type="phone"
                            placeholder="186 **** 1234"
                        >原手机号码</InputItem>
                    </div>
                    <div className='HCModifyPhone_content_box'>
                        <InputItem
                            type="number"
                            placeholder="请输入"
                        >验证码</InputItem>
                        <button className='HCModifyPhone_but'>获取验证码</button>
                    </div>
                    <div className='HCModifyPhone_content_box'>
                        <InputItem
                            type="phone"
                            placeholder="186 **** 1234"
                        >新手机号码</InputItem>
                    </div>
                    <div className='HCModifyPhone_content_box'>
                        <InputItem
                            type="number"
                            placeholder="请输入"
                        >验证码</InputItem>
                        <button className='HCModifyPhone_but'>获取验证码</button>
                    </div>
                    <div style={{ margin: '50px' }}>
                        <Button type="primary" activeStyle={false}>确认修改</Button>
                    </div>
                </div>
            </div>
        );
    }
}

export default HCModifyPhone;